<template>
  <div class="hello">
    <h3>{{ msg }}</h3>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in list" >
          <div v-for="subitem in item" >
            {{subitem.name}}
          </div>
          </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      list: [],
      refreshing: false,
      loading: false,
      finished: false,
      pageNum:1,
      currentfilm:[],
    };
  },
  methods: {
    onLoad() {
        let url = "https://m.maizuo.com/gateway";
        axios.get(url,{
          headers:{
            "X-Host": "mall.film-ticket.film.list"
          },
          params:{
           cityId: 310100,
           pageNum:this.pageNum,
           pageSize: 10,
           type: 1,
           k: 5562640,
         }
        }
       )
         .then((res) => {
           console.log(res);
           this.list.push(res.data.data.films);
           this.currentfilm=res.data.data.films;
           console.log(this.list);
         })
         .catch((error) => {
           console.log(error);
         });
        if(this.refreshing){
          this.list=[];
          this.refreshing=false;
        }
        this.loading=false;
        if(this.currentfilm==[]){
          this.finished=true
        } 
    },

    onRefresh(){
      this.finished=false;
      this.loading=true;
      this.pageNum++;
      this.onLoad();
    }

  },

};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
